<template>
  <div class="example">
    <p>{{num}}</p>
    <table class='table'>
      <tr>
        <th>名字</th>
        <th>年龄</th>
        <th>test</th>
      </tr>
      <tr>
        <td>{{obj.name}}</td>
        <td>{{obj.age}}</td>
        <td>{{obj.test}}</td>
      </tr>
    </table>
    <button @click="btnAddOne(1,$event)">age+1</button>
    <hr>
    <div>
      <div>props</div>
      <div>props1: {{props1}}</div>
      <button @click='change_props1()'>子组件change_props1</button>
    </div>
    <hr>
    <div>
      <div>computer</div>
      <div>props1: {{props1Com}}</div>
    </div>

  </div>
</template>
<script>
export default {
  props: ['props1'],
  name: "childOne",
  components: {},
  data() {
    return {
      obj: {
        name: 'test',
        age: 18,
        test: 10
      },
      num: 100
    }
  },
  methods: {
    changeName(name) {
      this.obj.name = name || 'lys'
    },
    changeNum(num) {
      this.num = num
    },
    btnAddOne(num) {
      this.obj.age = this.obj.age + (num || 1)// 直接修改可以

      // const numRes = this.obj.age + (num || 1)
      // this.$set(this.obj, 'age', numRes)  // 使用$set也可以
    }
    ,
    change_props1() {
      this.props1Com = Math.random() * 100
    }
  },
  computed: {
    // 子组件修改父组数据的案例,使子父都能同时变化
    props1Com: {
      get: function () {
        return this.props1
      },
      set: function (newval) {
        this.$emit('changeVal', newval) // 触发组件实例上事件的并发送数据给父组件
      }
    }
  },
  activated: {},
  deactivated: {}
}
</script>
<style lang="less" scoped>
.example {
  text-align: center;
}
table {
  margin: 0 auto;
}
td,
th {
  padding: 2px;
  border: 1px solid #ccc;
}
</style>
